<template>
	<view>
		<scroll-view class="scroll-view"  scroll-y="true" @scrolltolower="lower" :style="'height:'+scriptHeight+'px'">
			<view class="dynasty">
				<view class="key">按朝代</view>
				<view class="item">
					<view  :class="[dynastyId == item.id ? 'item-labe-checked':'item-label']" v-for="(item,index) in dynastyList" :key="index" @click="clickDynasty(item.id)">{{item.name}}</view>
				</view>
			</view>
			<view class="dynasty">
				<view class="key">按分类</view>
				<view class="item">
					<view :class="[labelId == item.id ? 'item-labe-checked':'item-label']" v-for="(item,index) in labelShowList" :key="index" @click="clickLabel(item.id)">{{item.name}}</view>
					
				</view>
				<view @click="labelshowaction" class="label-show-action">{{labelShowAction}}</view>
			</view>
			<view class="poet">
				<view class="item" v-for="(item,index) in poetList" :key="index" @click="toUrl(item.id)">
					<view class="avatar"><image :src="item.avatar"></image></view>
					<view class="content">
						<view class="name">{{item.name}}-{{item.dynasty}}</view>
						<!-- <view class="content-dynasty">{{item.dynasty}}</view> -->
						<view class="desc">{{item.descr}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import unils from "../../unils/utils.js"
	export default {
		data() {
			return {
				'scriptHeight':400,
				'dynastyList':[],
				'labelList':[],
				'labelShowList':[],
				'labelShowAction':"展开",
				'labelShowNum':12,
				'poetList':[],
				'dynastyId':0,
				'labelId':0,
				'currentPage':1,//当前页数
				'flag':false,
				
			}
		},
		onReady() {
			this.scriptHeight = uni.getSystemInfoSync().windowHeight;
		},
		onLoad(option) {
			this.dynastyId = option.dynasty_id;
			this.labelId = option.label_id;
			if(this.dynastyId == undefined){
				this.dynastyId = 0;
			}
			if(this.labelId == undefined){
				this.labelId = 0;
			}
			this.getData();
		},
		methods: {
			clickLabel:function(id){
				this.labelId = id;
				this.currentPage = 1;
				this.poetList = [];
				this.getData();
			},
			clickDynasty:function(id){
				this.dynastyId = id;
				this.currentPage = 1;
				this.poetList = [];
				this.getData();
			},
			labelshowaction:function(){
				if(this.labelShowAction == '展开'){
					this.labelShowList = this.labelList;
					this.labelShowAction = "收起";
				} else {
					this.labelShowList = this.labelList.slice(0,this.labelShowNum);
					this.labelShowAction = "展开";
				}
			},
			toUrl:function(id){
				uni.navigateTo({
					url:"../shici/list?poet_id="+id,
				})
			},
			lower:function(){
				// console.log('scrolltolower');
				if(this.flag){
					this.getData();
				}
			},
			getData:function(){
				uni.showLoading({title: '加载中',mask:true});
				let that = this;
				that.flag = false;
				uni.request({
					url: that.websiteUrl+'/poet',
					method:'GET',
					header: {
					        'x-requested-with': 'xmlhttprequest' //自定义请求头信息
					    },
					data:{
						'dynasty_id':that.dynastyId,
						'label_id':that.labelId,
						'c_page':that.currentPage,
					},
					success:(res)=>{
						
						if(res.data.code != 1){
							uni.showToast({
								title:res.data.msg,
								duration:2000,
								icon:'none',
							})
						} else {
							that.poetList = that.poetList.concat(res.data.data.poet);
							let dynasty = res.data.data.dynasty;
							if(!unils.stringIsEmpty(dynasty)){
								that.dynastyList = dynasty;
								
							}
							let label = res.data.data.label;
							if(!unils.stringIsEmpty(label)){
								that.labelList = label;
								that.labelShowList = that.labelList.slice(0,that.labelShowNum);
							}
							
							
							that.currentPage++;
							console.log(res.data.data.poet);
						}
						that.flag = true;
					},
					complete: (res) => {
						setTimeout(function () {uni.hideLoading();}, 100);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.scroll-view{
	height: 450px;
	background-color: $uni-scroll-bg-clolr;
	.dynasty{
		background-color: $uni-bg-color;
		margin: 10px;
		border-radius: 5px;
		padding: 10px;
		.key{
			font-size: 16px;
			color:$uni-text-color;
			margin-bottom: 5px;
		}
		.item{
			display: flex;
			width:100%;
			flex-wrap: wrap;
			
			.item-label{
				font-size: 13px;
				background-color: $uni-primary-color;
				color:$uni-bg-color;
				padding: 5px 8px;
				margin:5px;
				border-radius: 5px;
				
			}
			.item-labe-checked{
				font-size: 13px;
				background-color: $uni-primary-color;
				color:$uni-bg-color;
				font-weight: bold;
				
				padding: 5px 8px;
				margin:5px;
				border-radius: 5px;
				position: relative;
			}
			.item-labe-checked:after{
				content: '';
				position: absolute;
				right:17px;
				top:-5px;
				bottom: 7px;
				width:10px;
				height:10px;
				background: $uni-primary-color;
				transform: rotate(45deg);
			}
		}
		.label-show-action{
			display: flex;
			justify-content: center;
			font-size: 13px;
			color:$uni-text-color;
		}
	}
	.poet{
		margin-top: 20px;
		.item{
			background-color: $uni-bg-color;
			margin: 10px;
			border-radius: 5px;
			display: flex;
			padding:5px;
			.avatar{
				image{
					width:70px;
					height:70px;
					border-radius: 5px;
				}
			}
			.content{
				margin-left: 10px;
				font-size:$uni-list-content-font-size;
				color: $uni-text-color;
				.name{
					font-size:16px;
					font-weight: bold;
					// background-color: #007AFF;
				}
				.content-dynasty{
					// background-color: #F07373;
				}
				.desc{
					margin-top: 3px;
					line-height: 20px;
				}
			}
		}
	}
}
</style>
